<template>
  <el-container>
    <!--查询条件开始-->
    <el-header height="1">
      <el-button type="success" size="small" @click="showDialog('add')">新增</el-button>
    </el-header>
    <!--查询条件结束-->
    <!--列表开始-->
    <el-main>
      <table-pagination
        :table-data="table.prod.tableData"
        :table-header-config="table.tableHeaderConfig"
        :filter-data="table.filterData"
        :total="table.prod.total"
        :page-size="table.prod.limit"
        :now-page="table.prod.nowPage"
        :operation-config="table.operationConfig"
        @current-change="currentChange"
      />
    </el-main>
    <!--列表结束-->
    <!--弹框开始-->
    <el-dialog :title="editModStr" :visible.sync="parmsValue.updateOpen" :before-close="handleClose">
      <el-form ref="updateForm" size="small" :model="parmsValue.update" label-width="160px" :rules="form.rules" class="middle-form">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="prod_code" label="产品代码">
              <el-input v-model="parmsValue.update.prod_code" :clearable="true" :disabled="detailMod || updateMod" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="prod_name" label="产品名称">
              <el-input v-model="parmsValue.update.prod_name" :clearable="true" :disabled="detailMod || updateMod" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="income_rate" label="收益率(%)">
              <el-input v-model="parmsValue.update.income_rate" :clearable="true" :disabled="detailMod" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="pay_rate" label="费率(%)">
              <el-input v-model="parmsValue.update.pay_rate" :clearable="true" :disabled="detailMod" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="payinterest_freq" label="付息频率">
              <el-select v-model="parmsValue.update.payinterest_freq" :clearable="true" :disabled="detailMod">
                <el-option v-for="(item,index) in dict.t8_pay_newfreq" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="payfee_freq" label="付费频率">
              <el-select v-model="parmsValue.update.payfee_freq" :clearable="true" :disabled="detailMod">
                <el-option v-for="(item,index) in dict.t8_pay_newfreq" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="startinterest_date" label="起息日">
              <el-date-picker v-model="parmsValue.update.startinterest_date" format="yyyy-MM-dd" value-format="yyyyMMdd" :clearable="true" :disabled="detailMod" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="endinterest_date" label="到期日">
              <el-date-picker v-model="parmsValue.update.endinterest_date" format="yyyy-MM-dd" value-format="yyyyMMdd" :clearable="true" :disabled="detailMod" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="t8_sys_portfol_id" label="产品组合">
              <el-select v-model="parmsValue.update.t8_sys_portfol_id" :clearable="true" :disabled="detailMod">
                <el-option v-for="(item,index) in dict.M8000EQPORT" :key="index" :value="item.value" :label="item.value+'-'+item.text" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="basedays" label="计息基数">
              <el-select v-model="parmsValue.update.basedays" :clearable="true" :disabled="detailMod">
                <el-option v-for="(value,key,index) in dict.t8_intr_base" :key="index" :value="key+''" :label="value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="raise_money" label="募集金额(元)">
              <el-input v-model="parmsValue.update.raise_money" :clearable="true" :disabled="detailMod" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="closeDialog">取消</el-button>
        <el-button type="success" size="small" @click="update">确定</el-button>
      </div>
    </el-dialog>
    <!--弹框结束-->
  </el-container>
</template>

<script>
  import { formItems } from '@/utils/formItems'
  import * as kk from '@/utils/k-utils'
  import request from '@/utils/request'
  import axios from 'axios'

  export default {
    data() {
      return {
        dict: {
          t8_pay_newfreq: {},
          t8_intr_base: {},
          busdirection: {}
        },
        table: {
          prod: {
            tableData: [],
            total: 100,
            exeid: 'M834SCSP001EQ001',
            limit: 10,
            nowPage: 1
          },
          tableHeaderConfig: [
            formItems.portName, formItems.prodName, formItems.prodCode, formItems.raiseMoney,
            formItems.startInterestDate, formItems.endInterestDate, formItems.incomeRate,
            formItems.payRate, formItems.baseDays
          ],
          filterData: {
            day: [formItems.startInterestDate.prop, formItems.endInterestDate.prop],
            money: [formItems.raiseMoney.prop],
            delimiter: 'ch'
          },
          operationConfig: {
            fixed: 'left',
            width: 180,
            operationButton: [
              { value: '修改', func: (row) => this.showDialog('update', row) },
              { value: '删除', func: (row) => this.delete(row) }
            ]
          }
        },
        form: {
          rules: {
            prod_code: [{ required: true, message: '产品代码必填', trigger: 'change' }],
            prod_name: [{ required: true, message: '产品名称必填', trigger: 'change' }],
            income_rate: [{ required: true, message: '收益率必填', trigger: 'change' }],
            pay_rate: [{ required: true, message: '费率必填', trigger: 'change' }],
            payinterest_freq: [{ required: true, message: '付息频率必选', trigger: 'change' }],
            payfee_freq: [{ required: true, message: '付费频率必选', trigger: 'change' }],
            startinterest_date: [{ required: true, message: '起息日必选', trigger: 'change' }],
            endinterest_date: [{ required: true, message: '到期日必选', trigger: 'change' }],
            t8_sys_portfol_id: [{ required: true, message: '产品组合必选', trigger: 'change' }],
            basedays: [{ required: true, message: '计息基数必选', trigger: 'change' }],
            raise_money: [{ required: true, message: '募集金额必填', trigger: 'change' }]
          }
        },
        parmsValue: {
          // 增删改字段值
          update: {
            prod_code: '', prod_name: '', income_rate: '', pay_rate: '', payinterest_freq: '', payfee_freq: '',
            startinterest_date: '', endinterest_date: '', t8_sys_portfol_id: '', basedays: '', raise_money: ''
          },
          updateOpen: false,
          editMod: 'update'
        }
      }
    },
    computed: {
      editModStr() {
        switch (this.parmsValue.editMod) {
        case 'update':
          return '修改情景产品信息'
        case 'add':
          return '新增情景产品信息'
        case 'detail':
        default:
          return '情景产品信息详情'
        }
      },
      updateMod() {
        return this.parmsValue.editMod === 'update'
      },
      detailMod() {
        return this.parmsValue.editMod === 'detail'
      },
      addMod() {
        return this.parmsValue.editMod === 'add'
      }
    },
    // 生命周期开始
    // 生命周期结束
    methods: {
      currentChange(index) {
        this.table.prod.nowPage = index
        this.loadTable()
      },
      loadTable() {
        kk.k_load_table(this, 'prod', formItems.DATA)
      },
      init() {
        const dictReq = []
        const dicts = ['t8_pay_newfreq', 't8_intr_base', 't8_direction']
        dicts.forEach(key => dictReq.push(request({ url: 'system/base/dict/' + key + '.json', method: 'post', loading: true })))
        axios.all(dictReq).then(axios.spread((t8_pay_newfreq, t8_intr_base, busdirection) => {
          this.dict['t8_pay_newfreq'] = t8_pay_newfreq
          this.dict['t8_intr_base'] = t8_intr_base
          this.dict['busdirection'] = busdirection
          // 加载exeid数据字典
          const exeidReq = []
          const exeids = [{ service: formItems.DATA, params: { exeid: 'M8000EQPORT' }}, { service: formItems.DATA, params: { exeid: 'M834SCSP002EQ001' }}]
          exeids.forEach(item => exeidReq.push(request({
            url: '/' + item.service + '/base/comn-query.json', method: 'post', loading: true, params: item.params
          })))
          axios.all(exeidReq).then(axios.spread((...items) => {
            for (let i = 0; i < exeids.length; i++) {
              if (exeids[i].dict) {
                this.dict[exeids[i].dict] = items[i].rows
              } else {
                this.dict[exeids[i].params.exeid] = items[i].rows
              }
            }
            // 正式加载表格数据
            this.loadTable()
          }))
        }))
      },
      handleClose(done) {
        this.resetFields('updateForm')
        done()
      },
      closeDialog() {
        this.parmsValue.updateOpen = false
        this.resetFields('updateForm')
      },
      update() {
        // 判断是否是修改
        this.parmsValue.update.mdfy = this.updateMod ? 1 : 0
        // 对于请求参数前加{[json]}的解释：没什么解释，之前的接口就是要接收这种数据
        kk.k_load_url(formItems.DATA, '/sceneprod.action', { param: '{[json]}' + JSON.stringify(this.parmsValue.update) }).then(resp => {
          if (resp.success) {
            this.closeDialog()
            this.loadTable()
          }
        })
      },
      showDialog(editMod, params = {}) {
        switch (editMod) {
        case 'add':
          this.parmsValue.editMod = 'add'
          this.parmsValue.updateOpen = true
          break
        case 'update':
          this.parmsValue.editMod = 'update'
          this.parmsValue.updateOpen = true
          this.$nextTick(() => {
            Object.assign(this.parmsValue.update, params)
          })
          break
        case 'detail':
          this.parmsValue.editMod = 'detail'
          this.parmsValue.updateOpen = true
          this.$nextTick(() => {
            Object.assign(this.parmsValue.update, params)
          })
          break
        default:
        }
      },
      resetFields(form) {
        this.$refs[form].resetFields()
      }
    }
  }
</script>
